<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url(image/33.jpg) no-repeat;
            background-size: cover;
            width: 100%;
            height: 100%;
            perspective: 1200px;
        }
        section {
            width: 300px;
            height: 300px;
            position: relative;
            margin: 150px auto;
            transform-style: preserve-3d;
            transform: rotate3d(1,1,0,30deg);
            /* transition: 0.8s; */
           animation: ss 5s infinite alternate;
        }
       
        @keyframes ss {
            0%{
                transform: rotatex(0deg)  rotatey(0deg)  rotatez(0deg) ;
            }
            25%{
                transform: rotatex(90deg)  rotatey(90deg)  rotatez(90deg)  ;
            }
            50%{
                transform: rotatex(180deg)  rotatey(180deg)  rotatez(180deg)  ;
            }
            75%{
                transform: rotatex(270deg)  rotatey(270deg)  rotatez(270deg)  ;
            }
            100%{
                transform: rotatex(360deg)  rotatey(360deg)  rotatez(360deg) ;
            }
        }
        div {
            width: 300px;
            height: 300px;
            position: absolute;
            opacity: 0.7;
        }
        div img{
            width: 100%;
            height: 100%;
        }
        div:nth-child(1) {
            background: rgb(214, 74, 74);
            transform: translatex(150px) rotatey(90deg);
        }
        div:nth-child(2) {
            transform: translatex(-150px) rotatey(90deg);
            background: rgb(165, 214, 74);
        }
        div:nth-child(3) {
            transform: translatey(150px) rotatex(90deg);
            background: rgb(74, 214, 179);
        }
        div:nth-child(4) {
            transform: translatey(-150px) rotatex(90deg);
            background: rgb(74, 174, 214);
        }
        div:nth-child(5) {
            transform: translatez(150px);
            background: rgb(151, 74, 214);
        }
        div:nth-child(6) {
            transform: translatez(-150px);
            background: rgb(214, 74, 167);
        }
    </style>
</head>
<body>
    <section>
        <div> <img src="image/1 (1).jfif" alt=""></div>
        <div> <img src="image/1 (1).jpg" alt=""></div>
        <div> <img src="image/1 (2).jpg" alt=""></div>
        <div> <img src="image/1 (3).jpg" alt=""></div>
        <div> <img src="image/1 (4).jpg" alt=""></div>
        <div> <img src="image/1 (5).jpg" alt=""></div>
    </section>
</body>
</html>